<template>
  <div class="mod-config order">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="currentChangeHandle(1)">
      <el-form-item>
        <el-input v-model="dataForm.order_sn" placeholder="订单编号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.special_id" placeholder="会员码" clearable></el-input>
      </el-form-item>
      <el-form-item v-show="iszan">
        <div class="block">
          <span class="demonstration">订单时间</span>
          <el-date-picker
            v-model="dataForm.time"
            type="datetimerange"
            :value-format="'yyyy-MM-dd HH:mm:ss'"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item v-show="iszan">
        <el-select clearable v-model="dataForm.order_status" placeholder="订单状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="iszan">
        <el-select clearable v-model="dataForm.shipping_status" placeholder="快递状态">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="iszan">
        <el-select clearable v-model="dataForm.shipping_id" placeholder="快递渠道">
          <el-option
            v-for="item in shipping_names"
            :key="item.shippingId"
            :label="item.shippingName"
            :value="item.shippingId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="iszan">
        <el-select clearable v-model="dataForm.kefu_id" placeholder="选择客服">
          <el-option
            v-for="item in kefus"
            :key="item.userId"
            :label="item.realname"
            :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="iszan">
        <el-select custom-class="color" clearable v-model="dataForm.sign_status" placeholder="颜色标记">
          <el-option
            v-for="item in signs"
            :class="item.color"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="currentChangeHandle(1)">查询</el-button>
        <el-button v-if="isAuth('order:v9order:delete')" type="danger" @click="deleteHandle()"
                   :disabled="dataListSelections.length <= 0">批量删除
        </el-button>
        <el-link v-show="!iszan" @click="zankai()" :underline="false" class="zankai">展开 <i
          class="el-icon-arrow-down"></i></el-link>
        <el-link v-show="iszan" @click="zankai()" :underline="false" class="zankai">收起 <i class="el-icon-arrow-up"></i>
        </el-link>
      </el-form-item>
      <el-form-item>
        <el-button @click="daochuHandle()">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="signStatus"
        header-align="center"
        align="center"
        width="60"
        label="标记">

        <template slot-scope="scope">
          <el-popover
            placement="right"
            width="50"
            trigger="click">
            <div>
              <ul class="color-list-ul" style="display: flex;">
                <li class="white el-tag" @click="changeBiaoji(scope.row.orderId,0)" sign_status="0" title="取消"></li>
                <li class="red el-tag" @click="changeBiaoji(scope.row.orderId,1)" sign_status="1" title="红"></li>
                <li class="blue el-tag" @click="changeBiaoji(scope.row.orderId,2)" sign_status="2" title="蓝"></li>
                <li class="green el-tag" @click="changeBiaoji(scope.row.orderId,3)" sign_status="3" title="绿"></li>
                <li class="yellow el-tag" @click="changeBiaoji(scope.row.orderId,4)" sign_status="4" title="黄"></li>
              </ul>
            </div>
            <el-tag slot="reference" v-if="scope.row.signStatus === 0" class="biaoji"></el-tag>
            <el-tag slot="reference" v-if="scope.row.signStatus === 1" class="biaoji b1"></el-tag>
            <el-tag slot="reference" v-if="scope.row.signStatus === 2" class="biaoji b2"></el-tag>
            <el-tag slot="reference" v-if="scope.row.signStatus === 3" class="biaoji b3"></el-tag>
            <el-tag slot="reference" v-if="scope.row.signStatus === 4" class="biaoji b4"></el-tag>
          </el-popover>
        </template>


      </el-table-column>
      <el-table-column
        prop="orderSn"
        header-align="center"
        align="center"
        min-width="170"
        label="订单编号">
        <template slot-scope="scope">
          <span class="el-button--text" style="cursor: pointer" @click="getPackage(scope.row.orderId)">{{scope.row.orderSn}}</span>
          <el-dialog lock-scroll append-to-body custom-class="dialogcls" title="包裹信息"
                     :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column align="center" min-width="220" property="inTrackingNumber" label="国内快递单号"
                               width="150"></el-table-column>
              <el-table-column align="center" property="shipping" label="快递公司 	" width="200"></el-table-column>
              <el-table-column align="center" property="weight" label="重量(kg)"></el-table-column>
              <el-table-column align="center" min-width="150" property="addTime" label="入库时间"></el-table-column>
            </el-table>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column
        prop="baseFeeStr"
        header-align="center"
        align="center"
        min-width="60"
        :formatter="formatMoney"
        label="投保金额">
      </el-table-column>

      <el-table-column
        prop="weightStr"
        header-align="center"
        align="center"
        min-width="60"
        :formatter="formatWeight"
        label="重量">
      </el-table-column>
      <el-table-column
        prop="addTimeStr"
        header-align="center"
        align="center"
        min-width="90"
        label="添加时间">
      </el-table-column>
      <el-table-column
        prop="specialId"
        header-align="center"
        align="center"
        min-width="80"
        label="会员码">
      </el-table-column>
      <el-table-column
        prop="shippingName"
        header-align="center"
        align="center"
        min-width="100"
        label="快递名称">
      </el-table-column>
      <el-table-column
        prop="outTrackingNumber"
        header-align="center"
        align="center"
        min-width="130"
        label="快递单号">
      </el-table-column>
      <el-table-column
        prop="shippingStatus"
        header-align="center"
        align="center"
        min-width="80"
        label="快递状态">
        <template slot-scope="scope">
          <el-tag style="cursor: pointer" v-if="scope.row.shippingStatus === 0" size="small" type="danger">等待发货</el-tag>
          <el-tag style="cursor: pointer" v-if="scope.row.shippingStatus === 8" size="small" type="info">暂加</el-tag>
          <el-tag style="cursor: pointer" @click="getKuaidiStatus(scope.row.shippingCode,scope.row.outTrackingNumber)"
                  v-if="scope.row.shippingStatus === 1" size="small">在途
          </el-tag>
          <el-tag style="cursor: pointer" @click="getKuaidiStatus(scope.row.shippingCode,scope.row.outTrackingNumber)"
                  v-if="scope.row.shippingStatus === 4" size="small" type="success">妥协
          </el-tag>
          <el-dialog width="500px" lock-scroll append-to-body custom-class="dialogcls" title="快递状态"
                     :visible.sync="kuaidiVisible">
            <div class="block">
              <div class="radio" style="margin-bottom: 20px">
                <el-radio-group v-model="reverse">
                  <el-radio :label="true" style="margin-right: 10px;">倒序</el-radio>
                  <el-radio :label="false" style="margin-left: 0">正序</el-radio>
                </el-radio-group>
              </div>

              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.time">
                  {{activity.context}}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        header-align="center"
        align="center"
        min-width="80"
        label="支付状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 0" size="small" type="danger">未打包</el-tag>
          <el-tag v-if="scope.row.orderStatus === 1" size="small">已打包</el-tag>
          <el-tag v-if="scope.row.orderStatus === 2" size="small" type="success">已支付</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="postscript"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        min-width="100"
        label="备注">
        <template slot-scope="scope">
          <el-button v-if="scope.row.postscript==''&&scope.row.adminnote==''" type="text" size="small"
                     @click="addNoteMethod(scope.row.orderId)">添加备注
          </el-button>
          <el-tooltip placement="top" v-if="scope.row.postscript!=''||scope.row.adminnote!=''">
            <div slot="content" v-html="getNote(scope.row.adminnote,scope.row.postscript)"></div>
            <div @click="addNoteMethod(scope.row.orderId)"
                 style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer">
              {{scope.row.postscript||scope.row.adminnote}}
            </div>
          </el-tooltip>
        </template>
        <el-dialog width="500px" lock-scroll append-to-body title="添加备注" :visible.sync="dialogFormVisible">
          <el-form label-width="0px" :model="dataForm">
            <el-form-item>
              <el-input type="textarea" v-model.trim="dataForm.note" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveNote()">确 定</el-button>
          </div>
        </el-dialog>
      </el-table-column>


      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="160"
        label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="(scope.row.orderStatus === 2&&scope.row.shippingStatus===0)||(scope.row.orderStatus === 2&&scope.row.shippingStatus===5)"
            type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId)">发货
          </el-button>
          <el-button v-if="scope.row.orderStatus === 1" type="text" size="small"
                     @click="gaijiaHandle(scope.row.orderId)">改价
          </el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.orderId)">删除</el-button>
          <el-button v-if="scope.row.shippingStatus ===0" type="text" size="small"
                     @click="zankou(scope.row.orderId,scope.row.orderSn)">暂扣
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <gaijia v-if="gaijiaVisible" ref="gaijia" @refreshDataList="getDataList"></gaijia>
    <daochu v-if="daochuVisible" ref="daochu" @refreshDataList="getDataList"></daochu>
  </div>
</template>

<script>
    import AddOrUpdate from './v9order-add-or-update'
    import daochu from './daochu'
    import gaijia from './gaijia'

    export default {
        data() {
            return {
                kuaiInfo: {
                    "message": "ok",
                    "nu": "EA922680018CN",
                    "ischeck": "0",
                    "condition": "00",
                    "com": "usps",
                    "status": "200",
                    "state": "0",
                    "data": [{
                        "time": "2019-09-22 00:59:00",
                        "ftime": "2019-09-22 00:59:00",
                        "context": "[ISC SAN FRANCISCO (USPS)]Processed Through Facility",
                        "location": "ISC SAN FRANCISCO (USPS)"
                    }, {
                        "time": "2019-09-19 20:27:00",
                        "ftime": "2019-09-19 20:27:00",
                        "context": "[WUHAN EMS,CHINA]Processed Through Facility",
                        "location": "WUHAN EMS,CHINA"
                    }, {
                        "time": "2019-09-19 19:58:00",
                        "ftime": "2019-09-19 19:58:00",
                        "context": "[WUHAN EMS,CHINA]Processed Through Facility",
                        "location": "WUHAN EMS,CHINA"
                    }, {
                        "time": "2019-09-19 18:02:00",
                        "ftime": "2019-09-19 18:02:00",
                        "context": "[CHINA]Acceptance",
                        "location": "CHINA"
                    }]
                },
                reverse: true,
                activities: [],
                gridData: [],
                kuaidiData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                kuaidiVisible: false,
                dataForm: {
                    order_status: '',
                    shipping_status: '',
                    time: '',
                    special_id: '',
                    order_sn: '',
                },
                shipping_names: [],
                signs: [{
                    value: 1,
                    color: 'red',
                    label: '红色标记'
                }, {
                    value: 2,
                    color: 'blue',
                    label: '蓝色标记'
                }, {
                    value: 3,
                    color: 'green',
                    label: '绿色标记'
                }, {
                    value: 4,
                    color: 'yellow',
                    label: '黄色标记'
                }],
                kefus: [],
                options: [{
                    value: 0,
                    label: '未打包'
                }, {
                    value: 1,
                    label: '已打包'
                }, {
                    value: 2,
                    label: '已支付'
                }],
                options2: [{
                    value: 0,
                    label: '等待发货'
                }, {
                    value: 1,
                    label: '在途'
                }, {
                    value: 4,
                    label: '妥投'
                }, {
                    value: 8,
                    label: '暂扣'
                }],
                value: '',
                visible: {},
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                daochuVisible:false,
                gaijiaVisible: false,
                iszan: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value2: ''
            }
        },
        components: {
            AddOrUpdate,
            gaijia,
            daochu
        },
        activated() {
            this.getDataList()
        },
        methods: {
            saveNote() {
                let note = this.dataForm.note
                if (typeof (note) == 'undefined' || note == '') return false
                this.dialogFormVisible = false
                let orderId = this.noteOrderId
                this.$http({
                    url: this.$http.adornUrl('/order/v9order/savenote'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'order_id': orderId,
                        'note': note
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })

            },
            addNoteMethod(val) {
                this.dialogFormVisible = true
                this.noteOrderId = val
                this.dataForm.note = ''
            },
            getNote(val1, val2) {
                if (val1 == null || val2 == null) return false
                val1 = val1.replace(/#/g, "<br/>")
                val2 = val2.replace(/#/g, "<br/>")
                if (val1.trim() != '' && val2.trim() != '') {
                    return val2 + '<hr/>' + val1
                } else {
                    return val2 + val1
                }

            },
            getKuaidiStatus(type, postid) {
                this.kuaidiVisible = true;
                this.$http({
                    url: this.$http.adornUrl('/order/v9order/getkuaidi'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'type': type,
                        'postid': postid,
                    })
                }).then(({data}) => {
                    if (data) {
                        this.activities = data.data;
                    } else {
                        this.$message.error(data.msg)
                    }
                })
                // axios.get('https://www.kuaidi100.com/query?type=ems&postid=EA922691585CN&temp=0.9333339811805839&phone=')
                //   .then(function (res) {
                //     res=this.kuaiInfo;
                //     if(res.message=='ok'){
                //       this.activities=res.data;
                //     }
                //   }).catch(function (error) {
                //     // handle error
                //     console.log(error);
                //   }).then(function () {
                //     // always executed
                //   });
            },
            getPackage(orderid) {
                this.dialogTableVisible = true;
                this.activities = [];
                this.gridData = [];
                this.$http({
                    url: this.$http.adornUrl('/package_storage/v9packagestorage/getPackage'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'order_id': orderid
                    })
                }).then(({data}) => {
                    if (data) {
                        console.log(data)
                        this.gridData = data
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            formatMoney: function (row, column) {
                return row.baseFeeStr = '¥' + parseFloat(row.baseFee).toFixed(2);
            },
            changeBiaoji: function (id, val) {

                //this.visible[id]=false;
                let e = document.getElementsByClassName('el-popover')
                for (let i = 0; i < e.length; i++) {
                    e[i].style.display = 'none'

                }
                this.$http({
                    url: this.$http.adornUrl('/order/v9order/changeBiaoji'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'order_id': id,
                        'status': val
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',

                            duration: 800,

                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })

            },
            zankai: function () {
                this.iszan = !this.iszan;
            },
            formatWeight: function (row, column) {
                return row.weightStr = parseFloat(row.weight).toFixed(1) + 'kg';
            },
            formatTime: function (row, column) {
                return row.addTimeStr = this.timestampToTime(row.addTime);
            },
            timestampToTime(timestamp) {
                var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y + M + D + h + m + s;
            },

            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                let time = this.dataForm.time;
                let start = '', end = '';
                if (time != '' && time != null) {
                    start = time[0];
                    end = time[1];
                }
                this.$http({
                    url: this.$http.adornUrl('/order/v9order/list'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'page': this.pageIndex,
                        'limit': this.pageSize,
                        'order_status': this.dataForm.order_status,
                        'shipping_status': this.dataForm.shipping_status,
                        'start': start,
                        'end': end,
                        'special_id': this.dataForm.special_id,
                        'order_sn': this.dataForm.order_sn,
                        'shipping_id': this.dataForm.shipping_id,
                        'sign_status': this.dataForm.sign_status,
                        'kefu_id': this.dataForm.kefu_id
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                        this.shipping_names = data.shipping
                        this.kefus = data.kefu
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            //改价
            gaijiaHandle(id) {
                this.gaijiaVisible = true
                this.$nextTick(() => {
                    this.$refs.gaijia.init(id)
                })
            },
            //导出
            daochuHandle(id) {
                this.daochuVisible = true
                this.$nextTick(() => {
                    this.$refs.daochu.init(id)
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.orderId
                })
                this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/order/v9order/delete'),
                        method: 'post',
                        data: this.$http.adornData(ids, false)
                    }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                })
            },
            zankou(id, orderid) {

                this.$confirm(`确定对[${orderid}]进行[暂扣]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/order/v9order/update'),
                        method: 'post',
                        data: this.$http.adornData({
                            'orderId': id,
                            'shippingStatus': 8
                        })
                    }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1000,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                })
            }
        }
    }
</script>
<style lang="scss">
  .order .zankai {
    cursor: pointer;
    margin-left: 10px;
    text-decoration: none;
  }

  .order .el-range-separator {
    width: 25px;
  }

  .order .biaoji {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0;
    background-color: #fff;
    cursor: pointer;
  }

  .order .biaoji.b1 {
    background-color: red;
  }

  .order .biaoji.b2 {
    background-color: blue;
  }

  .order .biaoji.b3 {
    background-color: green;
  }

  .order .biaoji.b4 {
    background-color: yellow;
  }

  .color-list-ul li {
    float: left;
    width: 18px;
    height: 18px;
    list-style-type: none;
    margin-left: 5px;
    cursor: pointer;
    padding: 0;
    line-height: 18px;
  }

  .color-list-ul .red {
    width: 18px;
    height: 18px;
    background-color: #E20A0A;
    color: #fff;
    border-radius: 50%;
    border: none;
  }

  .color-list-ul .blue {
    width: 18px;
    height: 18px;
    background-color: blue;
    color: #fff;
    border-radius: 50%;
    border: none;
  }

  .color-list-ul .green {
    width: 18px;
    height: 18px;
    background-color: green;
    color: #fff;
    border-radius: 50%;
  }

  .color-list-ul .yellow {
    width: 18px;
    height: 18px;
    background-color: yellow;
    color: #fff;
    border-radius: 50%;
  }

  .color-list-ul .white {
    background-color: white;
    width: 18px;
    height: 18px;
    color: #fff;
    border-radius: 50%;
  }

  .el-popover.el-popper {
    min-width: 150px;
    padding: 0;
  }

  .color-list-ul {
    display: flex;
    padding: 0;
    justify-content: center;
  }

  .order .el-button {
    margin-left: 3px;
  }

  .order .cell2 {
    cursor: pointer;
  }

  .order .cell2:hover {
    color: #3E8EF7;
  }

</style>
